<template>
    <div>
        <div style="border-bottom: 1px solid #e9e9e9">
            <a-checkbox
                :indeterminate="indeterminate"
                :checked="checkAll"
                @change="onCheckAllChange"
            >
                全选
            </a-checkbox>
        </div>
        <br />

        <a-row>
            <a-col v-for="(item, i) in copyDays" :key="i" span="8">
                <a-checkbox
                    :disabled="i === dayIndex"
                    :checked="item.checked"
                    @change="(e) => onCheckSingleChange(e, i)"
                >
                    {{ item.day }}
                </a-checkbox>
            </a-col>
        </a-row>
        <div class="pop-footer">
            <a-button
                size="small"
                type="default"
                style="margin-right: 10px"
                @click="handleCopyVisible"
            >
                取消
            </a-button>
            <a-button size="small" type="primary" @click="confirm">
                确认
            </a-button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { cloneDeep } from "lodash";
import { WEEK } from "./interface";
const props = defineProps({
    dayIndex: {
        type: Number,
        required: true,
    },
    handleCopyVisible: {
        type: Function,
        required: true,
    },
    handleCopySave: {
        type: Function,
        required: true,
    },
});
const checkAll = ref(false);
const indeterminate = ref(false);
const copyDays = ref([
    { day: WEEK.MOMENDAY, checked: false },
    { day: WEEK.THUESDAY, checked: false },
    { day: WEEK.WEDNESDAY, checked: false },
    { day: WEEK.THURSDAY, checked: false },
    { day: WEEK.FIRDAY, checked: false },
    { day: WEEK.SATURDAY, checked: false },
    { day: WEEK.SUNDAY, checked: false },
]);

const onCheckAllChange = (e) => {
    const _copyDays = cloneDeep(copyDays.value);
    _copyDays.forEach((item) => {
        if (e.target.checked && !item.checked) {
            item.checked = true;
        }
        if (!e.target.checked) {
            item.checked = false;
        }
    });
    copyDays.value = _copyDays;
    indeterminate.value = false;
    checkAll.value = e.target.checked;
};

const onCheckSingleChange = (e, index) => {
    const _copyDays = cloneDeep(copyDays.value);
    let _indeterminate = true;
    let _checkAll = false;
    _copyDays[index].checked = e.target.checked;

    if (!_copyDays.find((item) => !item.checked)) {
        _indeterminate = false;
        _checkAll = true;
    }

    copyDays.value = _copyDays;
    indeterminate.value = _indeterminate;
    checkAll.value = _checkAll;
};

const confirm = () => {
    const _copyDays = cloneDeep(copyDays.value);
    const copyIndexs = [];
    _copyDays.forEach((item, i) => {
        if (item.checked && i !== props.dayIndex) {
            copyIndexs.push(i);
            item.checked = false;
        }
    });
    copyDays.value = _copyDays;
    props.handleCopySave(copyIndexs);
};
</script>

<style scoped>
.pop-footer {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 10px;
}
/* Add your styles if needed */
</style>
